<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center" style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 1.4%">
                    <img src="../assets/bg/head-left.png" class="head-bg">
                    <span class="head-title">首都医科大学附属朝阳医院运营数据驾驶舱</span>
                    <img src="../assets/bg/head-right.png" class="head-bg">
                </div>

                <!-- 第二行 -->
                <div class="d-flex px-2" style="width: 20%;display: flex;flex-direction: row;justify-content: space-between;margin-top: 1%">
                    <span v-for="(ele, ind) in tabs" :key="ind" :class="ele.active == 1 ? 'tab-active' : 'tab'" @click="clickTabs(ind)">
                        <span :class="ele.active == 1 ? 'tab-active-text' : ''">{{ele.label}}</span>
                    </span>
                </div>

                <div class="body-box" v-if="tabs[0].active == 1">
                    <span class="left">
                        <span class="left-top">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">科研产出</span>
                            </div>
                             <Echart
                                     id="left-top"
                                     ref="lefttop"
                                     :options="leftTopOption"
                                     height="80%"
                                     width="100%"
                             ></Echart>
                        </span>
                       <span class="left-center">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">学术影响力</span>
                            </div>
                            <Echart
                                    id="left-center"
                                    ref="leftcenter"
                                    :options="leftCenterOption"
                                    height="80%"
                                    width="100%"
                            ></Echart>
                        </span>
                        <span class="left-bottom">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">主要发表文章</span>
                            </div>
                            <dv-scroll-board class="dv-scr-board"
                                     style="width: 97%;height: 80%;margin-left: 1.5%" :config="leftBottomOption" />
                        </span>
                    </span>
                    <span class="center">
                        <span class="center-top">
                            <span class="static-box">
                                <span>专病队列</span>
                                <span><dv-digital-flop :config="zbdlconfig" style="width:200px;height:50px;" /></span>
                            </span>
                            <span class="static-box">
                                <span>研究项目</span>
                                <span><dv-digital-flop :config="yjxmconfig" style="width:200px;height:50px;" /></span>
                            </span>
                            <span class="static-box">
                                <span>核心发表</span>
                                <span><dv-digital-flop :config="hxfbconfig" style="width:200px;height:50px;" /></span>
                            </span>
                            <span class="static-box">
                                <span>研究者</span>
                                <span><dv-digital-flop :config="yjzconfig" style="width:200px;height:50px;" /></span>
                            </span>
                        </span>
                        <span class="center-center">
                            <div class="title-box" style="margin-top: 16px">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">平台使用概览</span>
                            </div>
                            <Echart
                                    id="center-center"
                                    ref="centercenter"
                                    :options="centerCenterOption"
                                    height="35%"
                                    width="90%"
                            ></Echart>
                            <div class="title-box" style="margin-top: 0.2%">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">主要发表期刊分布</span>
                            </div>
                            <Echart
                                    id="center-center2"
                                    ref="centercenter2"
                                    :options="centerCenter2Option"
                                    height="50%"
                                    width="95%"
                                    style="margin-top: -2%"
                            ></Echart>
                        </span>
                        <span class="center-bottom">
                            <span class="center-bottom-box">
                                <div class="title-box" style="margin-top: 23px">
                                    <img src="../assets/bg/title-icon.png">
                                    <span class="mod-title">科研项目占比</span>
                                </div>
                                <Echart
                                        id="center-bottom"
                                        ref="centerbottom"
                                        :options="centerBottomOption"
                                        height="80%"
                                        width="100%"
                                ></Echart>
                            </span>
                            <span class="center-bottom-box">
                                <div class="title-box" style="margin-top: 23px">
                                    <img src="../assets/bg/title-icon.png">
                                    <span class="mod-title">科研热点指标</span>
                                </div>
                                <vue-wordcloud class="wordcloud"
                                        style="width: 95%;height: 73%;margin-left: 2.5%;margin-top: 5%"
                                        :options="centerBottom2Option"
                                />
                            </span>
                        </span>
                    </span>
                    <span class="right">
                        <span class="right-top">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">学者人员构成分析</span>
                            </div>
                             <Echart
                                     id="right-top"
                                     ref="righttop"
                                     :options="rightTopOption"
                                     height="80%"
                                     width="100%"
                             ></Echart>
                        </span>
                        <span class="right-center">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">在研项目情况</span>
                            </div>
                            <dv-capsule-chart :config="rightCenterOption" style="width:95%;height:80%;margin-left: 2%" />
                        </span>
                        <span class="right-bottom">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">主要在研项目</span>
                            </div>
                            <dv-scroll-board class="dv-scr-board"
                                             style="width: 97%;height: 80%;margin-left: 1.5%" :config="rightBottomOption" />
                        </span>
                    </span>
                </div>
                <div class="body-box" v-if="tabs[1].active == 1">
                    <span class="left2" style="">
                        <span class="left2-top">
                            <span class="left2-top-left">
                                <div class="title-box">
                                    <img src="../assets/bg/title-icon.png">
                                    <span class="mod-title">资产数据预览</span>
                                </div>
                                <span style="font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #B9C4FF;line-height: 22px;margin-left: 10%;margin-top: 5%">患者总数量12980人</span>
                                <div style="width: 80%;margin-left: 10%;display: flex;margin-top: 2%">
                                    <span class="zichanbili" style="height: 22px;width: 60%;background: linear-gradient(180deg, #4885E2 0%, #2F35F4 100%);border-radius: 2px;text-align: center">男性</span>
                                    <span class="zichanbili"  style="height: 22px;width: 30%;background: linear-gradient(180deg, #E26548 0%, #E84771 100%);border-radius: 2px;text-align: center">女性</span>
                                    <span class="zichanbili"  style="height: 22px;width: 10%;background: linear-gradient(180deg, #61DDAA 0%, #24A570 100%);border-radius: 2px;text-align: center"></span>
                                </div>
                                <Echart
                                        id="left2-top-left"
                                        ref="left2-top-left"
                                        :options="left2TopLeftOption"
                                        height="50%"
                                        width="90%"
                                        style="margin-left: 20px;margin-top: -5%"
                                ></Echart>
                                <div style="height: 40%;margin-top: -5%">
                                    <div style="display: flex;height: 32%;width: 95%;margin-left: 2.5%">
                                        <span class="sta-box">
                                            <div class="sta-key">门急诊病例数量</div>
                                            <div class="sta-value">2400台</div>
                                        </span>
                                        <span class="sta-box">
                                            <div class="sta-key">住院病案数量</div>
                                            <div class="sta-value">28.12%</div>
                                        </span>
                                    </div>
                                    <div style="display: flex;height: 32%;width: 95%;margin-left: 2.5%">
                                        <span class="sta-box">
                                            <div class="sta-key">手术总数量</div>
                                            <div class="sta-value">2400台</div>
                                        </span>
                                        <span class="sta-box">
                                            <div class="sta-key">医嘱总数量</div>
                                            <div class="sta-value">28.12%</div>
                                        </span>
                                    </div>
                                    <div style="display: flex;height: 32%;width: 95%;margin-left: 2.5%">
                                        <span class="sta-box">
                                            <div class="sta-key">检查报告总数量</div>
                                            <div class="sta-value">2400台</div>
                                        </span>
                                        <span class="sta-box">
                                            <div class="sta-key">检查报告总数量</div>
                                            <div class="sta-value">28.12%</div>
                                        </span>
                                    </div>
                                </div>
                            </span>
                            <span class="left2-top-right">
                                <span class="left2-top-right-top">
                                    <span class="static-box">
                                        <span>专病队列</span>
                                        <span><dv-digital-flop :config="zbdlconfig" style="width:200px;height:50px;" /></span>
                                    </span>
                                    <span class="static-box">
                                        <span>研究项目</span>
                                        <span><dv-digital-flop :config="yjxmconfig" style="width:200px;height:50px;" /></span>
                                    </span>
                                    <span class="static-box">
                                        <span>核心发表</span>
                                        <span><dv-digital-flop :config="hxfbconfig" style="width:200px;height:50px;" /></span>
                                    </span>
                                    <span class="static-box">
                                        <span>研究者</span>
                                        <span><dv-digital-flop :config="yjzconfig" style="width:200px;height:50px;" /></span>
                                    </span>
                                </span>
                                <span class="left2-top-right-bottom">
                                    <div class="title-box">
                                        <img src="../assets/bg/title-icon.png">
                                        <span class="mod-title">数据资产主体分布</span>
                                    </div>
                                    <Echart
                                            id="left2-top-right-top"
                                            ref="left2toprighttop"
                                            :options="left2TopRightBttom"
                                            height="109%"
                                            width="117.5%"
                                            style="margin-top: -6%;margin-left: -9%"
                                    ></Echart>
                                </span>
                            </span>
                        </span>
                        <span class="left2-bottom">
                            <span class="left2-bottom-left">
                                <div class="title-box">
                                    <img src="../assets/bg/title-icon.png">
                                    <span class="mod-title">生产系统资源分析</span>
                                </div>
                                <Echart
                                        id="left2-bottom-left"
                                        ref="left2bottomleft"
                                        :options="left2BottomLeftOption"
                                        height="100%"
                                        width="90%"
                                        style="margin-left: 20px;margin-top: -7%"
                                ></Echart>
                            </span>
                            <span class="left2-bottom-right">
                                <vue-wordcloud class="wordcloud"
                                        style="width: 95%;height: 73%; margin-left: 2.5%;margin-top: 7%"
                                        :options="left2Bottom2Option"
                                />
                            </span>
                        </span>
                    </span>
                    <span class="right2">
                        <div class="title-box">
                            <img src="../assets/bg/title-icon.png">
                            <span class="mod-title">产品价值评估</span>
                        </div>
                        <Echart
                                id="right2-top"
                                ref="right2top"
                                :options="right2TopOption"
                                height="30%"
                                width="90%"
                                style="margin-left: 20px;"
                        ></Echart>
                        <Echart
                                id="right2-center"
                                ref="right2center"
                                :options="right2CenterOption"
                                height="30%"
                                width="90%"
                                style="margin-left: 20px;"
                        ></Echart>
                        <Echart
                                id="right2-bottom"
                                ref="right2bottom"
                                :options="right2BottomOption"
                                height="30%"
                                width="90%"
                                style="margin-left: 20px;margin-top: 20px"
                        ></Echart>
                    </span>
                </div>
                <div class="body-box" v-if="tabs[2].active == 1">
                    <span class="left3">
                        <span class="left3-top">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">医疗指标分析(本月)</span>
                            </div>
                            <div style="height: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #B9C4FF;line-height: 22px;margin-top: 2%">门诊人数与出院人次比：4.51</div>
                            <dv-capsule-chart :config="left3Top1Option" style="width:100%;height:20%;margin-left: 2%" />
                            <div class="pieChar-index" style="display: flex;width: 100%;height: 33%">
                                <div class="pieChar-left" style="width: 50%;height: 100%">
                                    <div id="pieCharLeft" style="width: 100%;height: 100%"></div>
                                </div>
                                <div class="pieChar-right" style="width: 50%;height: 100%">
                                    <div id="pieCharRight" style="width: 100%;height: 100%"></div>
                                </div>
                            </div>
                            <div style="display: contents;margin-left: 3%">
                                <span class="sta-box" style="margin-left: 4%">
                                    <div class="sta-key">门急诊病例数量</div>
                                    <div class="sta-value">2400台</div>
                                </span>
                                <span class="sta-box" style="margin-left: 52%;    margin-top: -17%;">
                                    <div class="sta-key">住院病案数量</div>
                                    <div class="sta-value">28.12%</div>
                                </span>
                                <span class="sta-box" style="margin-left: 17%;    margin-top: -3%;">
                                    <div class="sta-key">住院病案数量</div>
                                    <div class="sta-value">28.12%</div>
                                </span>
                            </div>
                        </span>
                        <span class="left3-bottom">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">单病种质量管理(本月)</span>
                            </div>
                            <div style="margin-top: 1%;width: 80%;display: flex;flex-direction: row;justify-content: space-around">
                                <span style="height: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #A2A9DB;line-height: 22px;">急性心肌梗死</span>
                                <span style="height: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #45476D;line-height: 22px;">脑卒中</span>
                                <span style="height: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #45476D;line-height: 22px;">心脏衰竭</span>
                            </div>
                            <div class="chuyuan-box">
                                <span class="chuyuanhuanzhe">
                                    <span class="chuyuan-num">4.51%</span>
                                    <span class="chuyuan-title">出院患者例数</span>
                                </span>
                                <span class="chuyuanhuanzhe">
                                    <span class="chuyuan-num">12天</span>
                                    <span class="chuyuan-title">出院患者平均住院日</span>
                                </span>
                            </div>
                            <div class="chuyuan-box">
                                <span class="chuyuanhuanzhe">
                                    <span class="chuyuan-num">7812元</span>
                                    <span class="chuyuan-title">住院次均费用</span>
                                </span>
                                <span class="chuyuanhuanzhe">
                                    <span class="chuyuan-num">4.12%</span>
                                    <span class="chuyuan-title">住院病死率</span>
                                </span>
                            </div>
                        </span>
                    </span>
                    <span class="center3">
                        <span class="center3-top">
                            <span class="static-box">
                                <span>专病队列</span>
                                <span><dv-digital-flop :config="zbdlconfig" style="width:200px;height:50px;" /></span>
                            </span>
                            <span class="static-box">
                                <span>研究项目</span>
                                <span><dv-digital-flop :config="yjxmconfig" style="width:200px;height:50px;" /></span>
                            </span>
                            <span class="static-box">
                                <span>核心发表</span>
                                <span><dv-digital-flop :config="hxfbconfig" style="width:200px;height:50px;" /></span>
                            </span>
                            <span class="static-box">
                                <span>研究者</span>
                                <span><dv-digital-flop :config="yjzconfig" style="width:200px;height:50px;" /></span>
                            </span>
                        </span>
                        <span class="center3-center">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">数据资产主题分布</span>
                            </div>
                            <div style="width: 100%;height: 100%">
                                <Echart
                                        id="center3-center"
                                        ref="center3center"
                                        :options="center3CenterOption"
                                        height="120%"
                                        width="100%"
                                        style="margin-top: 0%;margin-bottom: -3%"
                                ></Echart>
                            </div>
                        </span>
                        <span class="center3-bottom">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">历年就诊人数统计</span>
                            </div>
                            <Echart
                                    id="center3-bottom"
                                    ref="center3bottom"
                                    :options="center3BottomOption"
                                    height="100%"
                                    width="100%"
                                    style="margin-top: -3%"
                            ></Echart>
                        </span>
                    </span>
                    <span class="right3">
                        <span class="right3-top">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">近一年门诊人数月度趋势</span>
                            </div>
                            <Echart
                                    id="right3-top"
                                    ref="right3top"
                                    :options="right3TopOption"
                                    height="100%"
                                    width="100%"
                                    style="margin-top: -3%"
                            ></Echart>
                        </span>
                        <span class="right3-center">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">近一年出院人数月度趋势</span>
                            </div>
                            <Echart
                                    id="right3-center"
                                    ref="right3center"
                                    :options="right3CenterOption"
                                    height="100%"
                                    width="100%"
                                    style="margin-top: -9%"
                            ></Echart>
                        </span>
                        <span class="right3-bottom">
                            <div class="title-box">
                                <img src="../assets/bg/title-icon.png">
                                <span class="mod-title">近一年手术月度趋势</span>
                            </div>
                            <Echart
                                    id="right3-bottom"
                                    ref="right3bottom"
                                    :options="right3BottomOption"
                                    height="100%"
                                    width="100%"
                                    style="margin-top: -3%"
                            ></Echart>
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import drawMixin from "../utils/drawMixin";
    import Echart from '@/common/echart';
    import echarts from 'echarts'
    import 'echarts-gl'
    import '../../node_modules/echarts/map/js/province/beijing'

    export default {
        mixins: [ drawMixin ],
        data() {
            return {
                chart: {},
                loading: true,
                tabs: [{id: 1, label: "科研概览", active: 1}, {id: 2, label: "资产分析", active: 0}, {id: 3, label: "指标统计", active: 0}],
                leftTopOption: {
                    title: {
                        text: '期刊文章总数量1298篇',
                        left: 'left',
                        textStyle: {
                            fontFamily: 'Arial, Verdana, sans...',
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        bottom: '3%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '期刊文章',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'center',
                                normal: {
                                    formatter: '{b}\n{c}篇',
                                    rich: {
                                        per: {
                                            color: '#333',
                                            align: 'center',
                                            fontSize: 12
                                        }
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: [
                                { value: 529, name: '国内核' },
                                { value: 638, name: 'SCI' },
                                { value: 182, name: '其他' }
                            ],
                            color: ['#61DDAA', '#5B8FF9', '#F6DC28']
                        }
                    ]
                },
                leftCenterOption: {
                    title: {
                        text: '引用总数量15298篇',
                        left: 'left',
                        textStyle: {
                            fontFamily: 'Arial, Verdana, sans...',
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        bottom: '3%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '期刊文章',
                            type: 'pie',
                            radius: ['0%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'center',
                                normal: {
                                    formatter: '{b}\n{c}篇',
                                    rich: {
                                        per: {
                                            color: '#333',
                                            align: 'center',
                                            fontSize: 12
                                        }
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: [
                                { value: 280, name: '国内核' },
                                { value: 182, name: 'SCI' }
                            ],
                            color: ['#5B8FF9', '#61DDAA']
                        }
                    ]
                },
                leftBottomOption: {
                    // header: ['姓名', '性别', '类型'],
                    data: [
                        ['杜兰英', '女性', "会诊"],
                        ['李慧颖', '女性', "会诊"],
                        ['李乐鸥', '男性', "会诊"],
                        ['王安琪', '女性', "会诊"],
                        ['冯乐', '男性', "会诊"],
                        ['王慧哲', '女性', "会诊"],
                        ['李东', '女性', "会诊"],
                        ['张宏', '女性', "会诊"],
                        ['侯丽', '女性', "会诊"],
                        ['吴梦雨', '女性', "会诊"]
                    ],
                    rowNum: 6, //表格行数
                    headerHeight: 35,
                    headerBGC: '#0f1325', //表头
                    oddRowBGC: '#2A2B4A', //奇数行
                    evenRowBGC: '#181C49', //偶数行
                    index: true,
                    columnWidth: [50],
                    align: ['center']
                },
                zbdlconfig: {
                    number: [1950],
                    content: '{nt}个'
                },
                yjxmconfig: {
                    number: [320],
                    content: '{nt}个'
                },
                hxfbconfig: {
                    number: [128],
                    content: '{nt}篇'
                },
                yjzconfig: {
                    number: [283],
                    content: '{nt}人'
                },
                centerCenterOption: {
                    "tooltip": {
                        "trigger": "axis",
                        "transitionDuration": 0,
                        "borderColor": "#535b69",
                        "borderRadius": 8,
                        "borderWidth": 2,
                        "padding": [
                            5,
                            10
                        ],
                        "axisPointer": {
                            "type": "line",
                            "lineStyle": {
                                "type": "dashed",
                                "color": "#ffff00"
                            }
                        }
                    },
                    "legend": {
                        "icon": "circle",
                        "itemWidth": 8,
                        "itemHeight": 8,
                        "itemGap": 10,
                        "top": "16",
                        "right": "10",
                        "data": [
                            "PV",
                            "UV",
                            "IP"
                        ],
                        "textStyle": {
                            "fontSize": 14,
                            "color": "#a0a8b9"
                        }
                    },
                    "grid": {
                        "top": "46",
                        "left": "13%",
                        "right": "10",
                        "containLabel": false
                    },
                    "xAxis": [
                        {
                            "type": "category",
                            "boundaryGap": false,
                            "axisLabel": {
                                "interval": 0,
                                "fontSize": 14
                            },
                            "axisLine": {
                                "show": false,
                                "lineStyle": {
                                    "color": "#a0a8b9"
                                }
                            },
                            "axisTick": {
                                "show": false
                            },
                            "data": [
                                "1月",
                                "2月",
                                "3月",
                                "4月",
                                "5月",
                                "6月",
                                "7月",
                                "8月",
                                "9月"
                            ],
                            "offset": 10
                        }
                    ],
                    "yAxis": [
                        {
                            "type": "value",
                            "axisLine": {
                                "show": false,
                                "lineStyle": {
                                    "color": "#a0a8b9"
                                }
                            },
                            "axisLabel": {
                                "margin": 10,
                                "textStyle": {
                                    "fontSize": 14
                                }
                            },
                            "splitLine": {
                                "lineStyle": {
                                    "color": "#2b3646"
                                }
                            },
                            "axisTick": {
                                "show": false
                            }
                        }
                    ],
                    "series": [
                        {
                            "name": "PV",
                            "type": "line",
                            "smooth": true,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                }
                            },
                            "areaStyle": {
                                "normal": {
                                    "color": {
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false,
                                        "colorStops": [
                                            {
                                                "offset": 0,
                                                "color": "rgba(137, 189, 27, 0.3)"
                                            },
                                            {
                                                "offset": 0.8,
                                                "color": "rgba(137, 189, 27, 0)"
                                            }
                                        ]
                                    },
                                    "shadowColor": "rgba(0, 0, 0, 0.1)",
                                    "shadowBlur": 10
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "#1cc840"
                                }
                            },
                            "data": [
                                3230,
                                2986,
                                3392,
                                2642,
                                3521,
                                2573,
                                3132,
                                3147,
                                3283,
                                3336,
                                3831,
                                3633
                            ]
                        },
                        {
                            "name": "UV",
                            "type": "line",
                            "smooth": true,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                }
                            },
                            "areaStyle": {
                                "normal": {
                                    "color": {
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false,
                                        "colorStops": [
                                            {
                                                "offset": 0,
                                                "color": "rgba(219, 50, 51, 0.3)"
                                            },
                                            {
                                                "offset": 0.8,
                                                "color": "rgba(219, 50, 51, 0)"
                                            }
                                        ]
                                    },
                                    "shadowColor": "rgba(0, 0, 0, 0.1)",
                                    "shadowBlur": 10
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "#eb5690"
                                }
                            },
                            "data": [
                                1651,
                                1842,
                                2223,
                                2123,
                                2021,
                                1812,
                                1928,
                                2019,
                                2613,
                                2754,
                                2981,
                                3001
                            ]
                        },
                        {
                            "name": "IP",
                            "type": "line",
                            "smooth": true,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                }
                            },
                            "areaStyle": {
                                "normal": {
                                    "color": {
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false,
                                        "colorStops": [
                                            {
                                                "offset": 0,
                                                "color": "rgba(0, 136, 212, 0.3)"
                                            },
                                            {
                                                "offset": 0.8,
                                                "color": "rgba(0, 136, 212, 0)"
                                            }
                                        ]
                                    },
                                    "shadowColor": "rgba(0, 0, 0, 0.1)",
                                    "shadowBlur": 10
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "#43bbfb"
                                }
                            },
                            "data": [
                                310,
                                281,
                                123,
                                97,
                                323,
                                373,
                                423,
                                451,
                                501,
                                452,
                                201,
                                177
                            ]
                        }
                    ]
                },
                centerCenter2Option: {
                    //--------------   提示框 -----------------

                    tooltip: {
                        show: true, //---是否显示提示框,默认为true
                        trigger: 'item', //---数据项图形触发
                        axisPointer: {
                            //---指示样式
                            type: 'shadow',
                            axis: 'auto'
                        },
                        padding: 5,
                        textStyle: {
                            //---提示框内容样式
                            color: '#fff'
                        }
                    },

                    //-------------  grid区域  ----------------
                    grid: {
                        show: false, //---是否显示直角坐标系网格
                        top: 80, //---相对位置，top\bottom\left\right
                        containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
                        tooltip: {
                            //---鼠标焦点放在图形上，产生的提示框
                            show: true,
                            trigger: 'item', //---触发类型
                            textStyle: {
                                color: '#666'
                            }
                        }
                    },

                    //-------------   x轴   -------------------
                    xAxis: {
                        show: true, //---是否显示
                        position: 'bottom', //---x轴位置
                        offset: 0, //---x轴相对于默认位置的偏移
                        type: 'category', //---轴类型，默认'category'
                        name: '杂志类型', //---轴名称
                        nameLocation: 'end', //---轴名称相对位置
                        nameTextStyle: {
                            //---坐标轴名称样式
                            color: '#fff',
                            padding: [5, 0, 0, -5] //---坐标轴名称相对位置
                        },
                        nameGap: 15, //---坐标轴名称与轴线之间的距离
                        //nameRotate:270,			//---坐标轴名字旋转

                        axisLine: {
                            //---坐标轴 轴线
                            show: true, //---是否显示

                            //------------------- 箭头 -------------------------
                            symbol: ['none', 'arrow'], //---是否显示轴线箭头
                            symbolSize: [8, 8], //---箭头大小
                            symbolOffset: [0, 7], //---箭头位置

                            //------------------- 线 -------------------------
                            lineStyle: {
                                color: '#fff',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            //---坐标轴 刻度
                            show: true, //---是否显示
                            inside: true, //---是否朝内
                            lengt: 3, //---长度
                            lineStyle: {
                                //color:'red',			//---默认取轴线的颜色
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            //---坐标轴 标签
                            show: true, //---是否显示
                            inside: false, //---是否朝内
                            rotate: 0, //---旋转角度
                            margin: 5 //---刻度标签与轴线之间的距离
                            //color:'red',				//---默认取轴线的颜色
                        },
                        splitLine: {
                            //---grid 区域中的分隔线
                            show: false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
                            lineStyle: {
                                //color:'red',
                                //width:1,
                                //type:'solid',
                            }
                        },
                        splitArea: {
                            //--网格区域
                            show: false //---是否显示，默认false
                        },
                        data: [
                            'BMJ',
                            'Nature',
                            'Lancet',
                            'MEJM',
                            '当代医学',
                            '危重病急救医学',
                            '中华预防医学',
                            '中国全科医学',
                            '中华心血管杂志',
                            '中华消化杂志',
                            '中国实用内科杂志',
                            '中华外科杂志'
                        ] //内容
                    },

                    //----------------------  y轴  ------------------------
                    yAxis: {
                        show: true, //---是否显示
                        position: 'left', //---y轴位置
                        offset: 0, //---y轴相对于默认位置的偏移
                        type: 'value', //---轴类型，默认'category'
                        name: '期刊数{篇}', //---轴名称
                        nameLocation: 'end', //---轴名称相对位置value
                        nameTextStyle: {
                            //---坐标轴名称样式
                            color: '#fff',
                            padding: [5, 0, 0, 5] //---坐标轴名称相对位置
                        },
                        nameGap: 15, //---坐标轴名称与轴线之间的距离
                        //nameRotate:270,			//---坐标轴名字旋转

                        axisLine: {
                            //---坐标轴 轴线
                            show: true, //---是否显示

                            //------------------- 箭头 -------------------------
                            symbol: ['none', 'arrow'], //---是否显示轴线箭头
                            symbolSize: [8, 8], //---箭头大小
                            symbolOffset: [0, 7], //---箭头位置

                            //------------------- 线 -------------------------
                            lineStyle: {
                                color: '#fff',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            //---坐标轴 刻度
                            show: true, //---是否显示
                            inside: true, //---是否朝内
                            lengt: 3, //---长度
                            lineStyle: {
                                //color:'red',			//---默认取轴线的颜色
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            //---坐标轴 标签
                            show: true, //---是否显示
                            inside: false, //---是否朝内
                            rotate: 0, //---旋转角度
                            margin: 8 //---刻度标签与轴线之间的距离
                            //color:'red',				//---默认取轴线的颜色
                        },
                        splitLine: {
                            //---grid 区域中的分隔线
                            show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                            lineStyle: {
                                color: '#666',
                                width: 1,
                                type: 'dashed' //---类型
                            }
                        },
                        splitArea: {
                            //--网格区域
                            show: false //---是否显示，默认false
                        }
                    },

                    //------------ 内容数据  -----------------
                    series: [
                        {
                            name: '期刊数', //---系列名称
                            type: 'bar', //---类型
                            legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
                            label: {
                                //---图形上的文本标签
                                show: false,
                                position: 'insideTop', //---相对位置
                                rotate: 0, //---旋转角度
                                color: '#eee'
                            },
                            itemStyle: {
                                //---图形形状
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#4885E2'}, {offset: 1,color: '#2F35F4'}]),
                                barBorderRadius: [18, 18, 0, 0]
                            },
                            barWidth: '30', //---柱形宽度
                            barCategoryGap: '20%', //---柱形间距
                            data: [
                                3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700, 8000, 5020
                            ]
                        }
                    ]
                },
                centerBottomOption: {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        bottom: '3%',
                        left: 'center'
                    },
                    graphic: {
                        //图形中间图片
                        elements: [
                            {
                                type: 'image',
                                style: {
                                    image:
                                        'http://192.168.31.90:9000/lrhealth/huanxing.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220418%2F%2Fs3%2Faws4_request&X-Amz-Date=20220418T060418Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=a536a16e4e613f52e0d8adc6d5f541f882cec88f78c9786441a7ad4654293a44', //你的图片地址
                                    width: 220,
                                    height: 220
                                },
                                left: 'center',
                                top: 'center'
                            }, {
                                type: 'text',
                                style: {
                                    text: '总数: 65.8',
                                    textAlign: 'center',
                                    fill: '#0091FF',
                                    width: 30,
                                    height: 30,
                                    fontSize: 20,
                                    fontFamily: "Microsoft YaHei"
                                },
                                left: 'center',
                                top: 'center'
                            }
                        ]
                    },
                    series: [
                        {
                            name: '科研项目',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ["50%", "50%"],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'center',
                                normal: {
                                    formatter: '{b}\n{c}篇',
                                    rich: {
                                        per: {
                                            color: '#333',
                                            align: 'center',
                                            fontSize: 12
                                        }
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: [
                                { value: 120, name: '队列研究' },
                                { value: 2400, name: '横断面研究' },
                                { value: 345, name: '病例对症研究' },
                                { value: 280, name: '干预性研究' },
                                { value: 500, name: '观察性研究' }
                            ],
                            color: ['#0093FF','#3CE36E','#FFFB2E','#074CE5','#8543E0']
                        }
                    ]
                },
                centerBottom2Option: {
                    list: [
                        ["检验结果",53],
                        ["检查报告",33],
                        ["病案首页诊断",57],
                        ["住院医嘱",66],
                        ["入院记录",59],
                        ["病案首页",53],
                        ["健康档案",43],
                        ["体检报告",37],
                        ["护理",12],
                        ["手术记录",59],
                        ["生命体征记录",53],
                        ["病理报告",43],
                        ["首次病程记录",29],
                        ["会诊记录",22],
                        ["微生物检验结果",37],
                        ["门诊诊断",29],
                        ["出入量记录",22],
                        ["输血记录",11],
                        ["随访",19]
                    ],
                    color: [
                        ['#5DECBB', '#429CEA'],
                        '#5DECBB',
                        '#429CEA',
                        '#35CCE6'
                    ],
                    tooltip: {
                        show: false
                    },
                    backgroundColor: '#1C1E5F',
                    rotationRation: 0,
                    gridSize: 35,
                    minFontSize: 14,
                    maxFontSize: 22

                },
                rightTopOption: {
                    title: {
                        text: '研究者29人    人均发文量123篇   人均被引量75次',
                        left: 'left',
                        textStyle: {
                            fontFamily: 'Arial, Verdana, sans...',
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        },
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    // legend: {
                    //     bottom: '3%',
                    //         left: 'center'
                    // },
                    series: [
                        {
                            name: '期刊文章',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'center',
                                normal: {
                                    formatter: '{b}\n{c}篇',
                                    rich: {
                                        per: {
                                            color: '#333',
                                            align: 'center',
                                            fontSize: 12
                                        }
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: [
                                { value: 529, name: '国内核' },
                                { value: 638, name: 'SCI' },
                                { value: 182, name: '其他' }
                            ],
                            color: ['#61DDAA', '#5B8FF9', '#F6DC28']
                        }
                    ]
                },
                rightCenterOption: {
                    data: [
                        {
                            name: '国自然基金 项目',
                            value: 167
                        },
                        {
                            name: '国家科技部重大科技',
                            value: 123
                        },
                        {
                            name: '国家863重点项目',
                            value: 98
                        },
                        {
                            name: '973项目',
                            value: 75
                        },
                        {
                            name: '863项目',
                            value: 66
                        },
                    ],
                    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                    unit: '项',
                    showValue: true
                },
                rightBottomOption: {
                    // header: ['姓名', '分组'],
                    data: [
                        ['杜兰英', '张洛克研究组'],
                        ['李慧颖', '张洛克研究组',],
                        ['李乐鸥', '张洛克研究组'],
                        ['王安琪', '张洛克研究组'],
                        ['冯乐', '张洛克研究组'],
                        ['王慧哲', '张洛克研究组'],
                        ['李东', '张洛克研究组'],
                        ['张宏', '张洛克研究组'],
                        ['侯丽', '张洛克研究组'],
                        ['吴梦雨', '张洛克研究组']
                    ],
                    rowNum: 6, //表格行数
                    headerHeight: 35,
                    headerBGC: '#0f1325', //表头
                    oddRowBGC: '#2A2B4A', //奇数行
                    evenRowBGC: '#181C49', //偶数行
                    index: true,
                    columnWidth: [50],
                    align: ['center']
                },
                left2TopLeftOption: {
                    //--------------   提示框 -----------------

                    tooltip: {
                        show: true, //---是否显示提示框,默认为true
                        trigger: 'item', //---数据项图形触发
                        axisPointer: {
                            //---指示样式
                            type: 'shadow',
                            axis: 'auto'
                        },
                        padding: 5,
                        textStyle: {
                            //---提示框内容样式
                            color: '#fff'
                        }
                    },

                    //-------------  grid区域  ----------------
                    grid: {
                        show: false, //---是否显示直角坐标系网格
                        top: 80, //---相对位置，top\bottom\left\right
                        containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
                        tooltip: {
                            //---鼠标焦点放在图形上，产生的提示框
                            show: true,
                            trigger: 'item', //---触发类型
                            textStyle: {
                                color: '#666'
                            }
                        }
                    },

                    //-------------   x轴   -------------------
                    xAxis: {
                        show: true, //---是否显示
                        position: 'bottom', //---x轴位置
                        offset: 0, //---x轴相对于默认位置的偏移
                        type: 'category', //---轴类型，默认'category'
                        name: '杂志类型', //---轴名称
                        nameLocation: 'end', //---轴名称相对位置
                        nameTextStyle: {
                            //---坐标轴名称样式
                            color: '#fff',
                            padding: [5, 0, 0, -5] //---坐标轴名称相对位置
                        },
                        nameGap: 15, //---坐标轴名称与轴线之间的距离
                        //nameRotate:270,			//---坐标轴名字旋转

                        axisLine: {
                            //---坐标轴 轴线
                            show: true, //---是否显示

                            //------------------- 箭头 -------------------------
                            symbol: ['none', 'arrow'], //---是否显示轴线箭头
                            symbolSize: [8, 8], //---箭头大小
                            symbolOffset: [0, 7], //---箭头位置

                            //------------------- 线 -------------------------
                            lineStyle: {
                                color: '#fff',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            //---坐标轴 刻度
                            show: true, //---是否显示
                            inside: true, //---是否朝内
                            lengt: 3, //---长度
                            lineStyle: {
                                //color:'red',			//---默认取轴线的颜色
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            //---坐标轴 标签
                            show: true, //---是否显示
                            inside: false, //---是否朝内
                            rotate: 0, //---旋转角度
                            margin: 5 //---刻度标签与轴线之间的距离
                            //color:'red',				//---默认取轴线的颜色
                        },
                        splitLine: {
                            //---grid 区域中的分隔线
                            show: false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
                            lineStyle: {
                                //color:'red',
                                //width:1,
                                //type:'solid',
                            }
                        },
                        splitArea: {
                            //--网格区域
                            show: false //---是否显示，默认false
                        },
                        data: [
                            'BMJ',
                            'Nature',
                            'Lancet',
                            'MEJM',
                            '当代医学',
                            '危重病急救医学',
                            '中华预防医学',
                            '中国全科医学',
                            '中华心血管杂志',
                            '中华消化杂志',
                            '中国实用内科杂志',
                            '中华外科杂志'
                        ] //内容
                    },

                    //----------------------  y轴  ------------------------
                    yAxis: {
                        show: true, //---是否显示
                        position: 'left', //---y轴位置
                        offset: 0, //---y轴相对于默认位置的偏移
                        type: 'value', //---轴类型，默认'category'
                        name: '期刊数{篇}', //---轴名称
                        nameLocation: 'end', //---轴名称相对位置value
                        nameTextStyle: {
                            //---坐标轴名称样式
                            color: '#fff',
                            padding: [5, 0, 0, 5] //---坐标轴名称相对位置
                        },
                        nameGap: 15, //---坐标轴名称与轴线之间的距离
                        //nameRotate:270,			//---坐标轴名字旋转

                        axisLine: {
                            //---坐标轴 轴线
                            show: true, //---是否显示

                            //------------------- 箭头 -------------------------
                            symbol: ['none', 'arrow'], //---是否显示轴线箭头
                            symbolSize: [8, 8], //---箭头大小
                            symbolOffset: [0, 7], //---箭头位置

                            //------------------- 线 -------------------------
                            lineStyle: {
                                color: '#fff',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            //---坐标轴 刻度
                            show: true, //---是否显示
                            inside: true, //---是否朝内
                            lengt: 3, //---长度
                            lineStyle: {
                                //color:'red',			//---默认取轴线的颜色
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            //---坐标轴 标签
                            show: true, //---是否显示
                            inside: false, //---是否朝内
                            rotate: 0, //---旋转角度
                            margin: 8 //---刻度标签与轴线之间的距离
                            //color:'red',				//---默认取轴线的颜色
                        },
                        splitLine: {
                            //---grid 区域中的分隔线
                            show: true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                            lineStyle: {
                                color: '#666',
                                width: 1,
                                type: 'dashed' //---类型
                            }
                        },
                        splitArea: {
                            //--网格区域
                            show: false //---是否显示，默认false
                        }
                    },

                    //------------ 内容数据  -----------------
                    series: [
                        {
                            name: '期刊数', //---系列名称
                            type: 'bar', //---类型
                            legendHoverLink: true, //---是否启用图例 hover 时的联动高亮
                            label: {
                                //---图形上的文本标签
                                show: false,
                                position: 'insideTop', //---相对位置
                                rotate: 0, //---旋转角度
                                color: '#eee'
                            },
                            itemStyle: {
                                //---图形形状
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#9EC5FF'}, {offset: 1,color: '#131579'}]),
                                barBorderRadius: [18, 18, 0, 0],
                                barWidth: "80%"
                            },
                            barWidth: '20', //---柱形宽度
                            barCategoryGap: '20%', //---柱形间距
                            data: [
                                3020, 4800, 3600, 6050, 4320, 6200, 5050, 7200, 4521, 6700, 8000, 5020
                            ]
                        }
                    ]
                },
                left2BottomLeftOption: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }
                    ],

                    barWidth: '25',
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'Email',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210],
                            label: {
                                show: true,
                                formatter: "{a}"
                            }
                        },
                        {
                            name: 'Union',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310],
                            label: {
                                show: true,
                                formatter: "{a}"
                            },
                            itemStyle: {
                                show: true,
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: '#61DDAA'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#24A570'
                                    }
                                ]),
                            }
                        },
                        {
                            name: 'Video',
                            type: 'bar',
                            stack: 'Ad',
                            itemStyle: {
                                show: true,
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: '#C70019'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#EB354C'
                                    },
                                    {
                                        offset: 1,
                                        color: '#C70019'
                                    }
                                ]),
                                barBorderRadius: [20, 20, 0, 0],
                                borderWidth: 0,
                                borderColor: '#333'
                            },
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 232, 201, 154, 190, 330, 410],
                            label: {
                                show: true,
                                formatter: "{a}"
                            }
                        }
                    ]
                },
                left2Bottom2Option: {
                    list: [
                        ["血常规",53],
                        ["心脏彩超",43],
                        ["诊断名称",37],
                        ["医嘱名称",12],
                        ["糖化血红蛋白",59],
                        ["血小板计数",53],
                        ["健康档案",43],
                        ["体检记录",37],
                        ["是否入ICU",12],
                        ["ALT",59],
                        ["AST",53],
                        ["Cr",43],
                        ["是否脓毒血症",59],
                        ["是否吸烟",42],
                        ["是否饮酒",49],
                        ["血气分析",37],
                        ["WBC",25],
                        ["阿司匹林",17],
                        ["华法林",24]


                    ],
                    color: [
                        ['#5DECBB', '#429CEA'],
                        '#5DECBB',
                        '#429CEA',
                        '#35CCE6'
                    ],
                    tooltip: {
                        show: false
                    },
                    backgroundColor: '#1C1E5F',
                    rotationRation: 0,
                    gridSize: 35,
                    minFontSize: 14,
                    maxFontSize: 22

                },
                left2TopRightBttom: {
                    series: [
                        {
                            type: 'treemap',
                            breadcrumb: {
                                show: false
                            },
                            data: [
                                {
                                    name: 'nodeA',
                                    value: 10,
                                    color: ["#8E70B9", "#678DF2", "#CAAF86", "#B5B593", "#ABAB5D", "#5360C1", "#ABAB5D", "#6A74BD",
                                        "#7DBAE7", "#678DF2", "#919189", "#6D71FB", "#848DD4", "#BFBFA8", "#6A74BD", "#6A7DBF",
                                        "#678DF2", "#ABAB5D", "#CDB370", "#678DF2", "#8991D3", "#4973D0", "#7DBAE7"],
                                    children: [
                                        {
                                            "name": "住院患者主记录",
                                            "value": 10
                                        },
                                        {
                                            "name": "住院医嘱",
                                            "value": 9
                                        },
                                        {
                                            "name": "住院费用明细",
                                            "value": 7
                                        },
                                        {
                                            "name": "首次病程记录",
                                            "value": 4
                                        },
                                        {
                                            "name": "入院记录",
                                            "value": 4
                                        },
                                        {
                                            "name": "门诊结算记录",
                                            "value": 4
                                        },
                                        {
                                            "name": "门诊费用明细",
                                            "value": 4
                                        },
                                        {
                                            "name": "住院记录",
                                            "value": 2
                                        },
                                        {
                                            "name": "门诊挂号记录",
                                            "value": 4
                                        },
                                        {
                                            "name": "门诊处方(医嘱)",
                                            "value": 8
                                        },
                                        {
                                            "name": "术后首次病程记录",
                                            "value": 6
                                        },
                                        {
                                            "name": "门诊就诊记录",
                                            "value": 3
                                        },
                                        {
                                            "name": "病程记录",
                                            "value": 4
                                        },
                                        {
                                            "name": "手术记录",
                                            "value": 4
                                        },
                                        {
                                            "name": "抢救记录",
                                            "value": 1
                                        },
                                        {
                                            "name": "急诊病历",
                                            "value": 1
                                        },
                                        {
                                            "name": "死亡记录",
                                            "value": 1
                                        },
                                        {
                                            "name": "会诊记录",
                                            "value": 1
                                        },
                                        {
                                            "name": "出院记录",
                                            "value": 1
                                        },
                                        {
                                            "name": "入院记录",
                                            "value": 1
                                        },
                                        {
                                            "name": "门诊诊断",
                                            "value": 3
                                        },
                                        {
                                            "name": "住院诊断",
                                            "value": 9
                                        },
                                        {
                                            "name": "住院结算记录",
                                            "value": 9
                                        }

                                    ]
                                }
                            ]
                        }
                    ]
                },
                right2TopOption: {
                    title: {
                        text: '质控结果评估',
                        top: 10,
                        left: 5,
                        textStyle: {
                            fontFamily: 'Arial, Verdana, sans...',
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        },
                    },
                    tooltip: {
                        title: {
                            text: '规则分布-规则类型',
                            top: 10,
                            left: 10
                        },
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    radar: {
                        radius: '66%',
                        center: ['50%', '42%'],
                        splitNumber: 8,
                        splitArea: {
                            areaStyle: {
                                color: 'rgba(127,95,132,.3)',
                                opacity: 1,
                                shadowBlur: 45,
                                shadowColor: 'rgba(0,0,0,.5)',
                                shadowOffsetX: 0,
                                shadowOffsetY: 15
                            }
                        },
                        indicator: [
                            { name: '有效性', max: 10000 },
                            { name: '完整性', max: 20000 },
                            { name: '唯一性', max: 20000 },
                            { name: '准确性', max: 20000 },
                            { name: '一致性', max: 20000 },
                            { name: '及时性', max: 20000 }
                        ]
                    },
                    legend: {
                        left: 'center',
                        bottom: '10',
                        data: ['group', 'standards', 'rules']
                    },
                    series: [{
                        type: 'radar',
                        symbolSize: 0,
                        areaStyle: {
                            normal: {
                                shadowBlur: 13,
                                shadowColor: 'rgba(0,0,0,.2)',
                                shadowOffsetX: 0,
                                shadowOffsetY: 10,
                                opacity: 1
                            }
                        },
                        data: [
                            {
                                value: [1, 7000, 12000, 11000, 15000, 14000],
                                name: 'group'
                            },
                            {
                                value: [4000, 9000, 15000, 15000, 13000, 11000],
                                name: 'standards'
                            },
                            {
                                value: [1, 11000, 12000, 15000, 12000, 12000],
                                name: 'rules'
                            }
                        ]
                    }]
                },
                right2CenterOption: {
                    title: {
                        text: '规则分布-质控维度',
                        top: -2,
                        left: 10,
                        textStyle: {
                            fontFamily: 'Arial, Verdana, sans...',
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return `${params.name}${params.value} <br/> 占比%`;
                        }
                    },
                    color: ['#7B79FF', '#FFB0E2', '#59CFFF'],

                    series: [
                        {
                            name: '入厕人数',
                            type: 'pie',
                            clockWise: true, //顺时加载
                            hoverAnimation: true, //鼠标移入变大
                            radius: ['89%', '90%'],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'outside',
                                        formatter: '{a}\n{d}%'
                                    },
                                    labelLine: {
                                        show: true,
                                        length: 5,
                                        smooth: 0.5
                                    },
                                    borderWidth: 12,
                                    shadowBlur: 40,
                                    borderColor: '#7B79FF',
                                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                                }
                            },
                            data: [
                                {
                                    value: 7,
                                    name: '入厕人数'
                                },
                                {
                                    value: 3,
                                    name: '',
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'center'
                                            },
                                            labelLine: {
                                                show: true
                                            },
                                            color: '#3A4154',
                                            borderColor: '#3A4154',
                                            borderWidth: 12
                                        },
                                        emphasis: {
                                            color: '#dedede',
                                            borderColor: '#dedede',
                                            borderWidth: 0
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            name: '就餐人数',
                            type: 'pie',
                            clockWise: true,
                            hoverAnimation: true,
                            radius: ['75%', '76%'],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{a}\n{d}%'
                                    },
                                    labelLine: {
                                        show: true,
                                        length: 25,
                                        smooth: 0.5
                                    },
                                    borderWidth: 12,
                                    shadowBlur: 40,
                                    borderColor: '#FFB0E2',
                                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                                }
                            },
                            data: [
                                {
                                    value: 6,
                                    name: '就餐人数'
                                },
                                {
                                    value: 4,
                                    name: '',
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'center'
                                            },
                                            labelLine: {
                                                show: true,
                                                length: 50
                                            },
                                            color: '#3A4154',
                                            borderColor: '#3A4154',
                                            borderWidth: 12
                                        },
                                        emphasis: {
                                            color: '#dedede',
                                            borderColor: '#dedede',
                                            borderWidth: 0
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            name: '购物人数',
                            type: 'pie',
                            clockWise: true,
                            hoverAnimation: true,
                            radius: ['61%', '62%'],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        formatter: '{a}\n{d}%'
                                    },
                                    labelLine: {
                                        show: true,
                                        length: 50,
                                        smooth: 0.5
                                    },
                                    borderWidth: 12,
                                    shadowBlur: 40,
                                    borderColor: '#59CFFF',
                                    shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                                }
                            },
                            data: [
                                {
                                    value: 5,
                                    name: '购物人数'
                                },
                                {
                                    value: 5,
                                    name: '',
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'center'
                                            },
                                            labelLine: {
                                                show: true
                                            },
                                            color: '#3A4154',
                                            borderColor: '#3A4154',
                                            borderWidth: 12
                                        },
                                        emphasis: {
                                            color: '#dedede',
                                            borderColor: '#dedede',
                                            borderWidth: 0
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                },
                right2BottomOption: {
                    title: {
                        text: '规则分布-规则类型',
                        fontSize: 10,
                        top: -5,
                        left: 10,
                        textStyle: {
                            fontFamily: 'Arial, Verdana, sans...',
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                        },
                    },
                    graphic: {
                        //图形中间图片
                        elements: [
                            {
                                type: 'image',
                                style: {
                                    image:
                                        'http://192.168.31.90:9000/lrhealth/yuanxing.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minio%2F20220418%2F%2Fs3%2Faws4_request&X-Amz-Date=20220418T060228Z&X-Amz-Expires=432000&X-Amz-SignedHeaders=host&X-Amz-Signature=449655c43c61ba50ec921bbc7d5b73199813d60f58f085abe0dbc6ec438885f9', //你的图片地址
                                    width: 150,
                                    height: 150
                                },
                                left: 'center',
                                top: 'center'
                            }, {
                                type: 'text',
                                style: {
                                    text: '总数: 65.8',
                                    textAlign: 'center',
                                    fill: '#0091FF',
                                    width: 30,
                                    height: 30,
                                    fontSize: 20,
                                    fontFamily: "Microsoft YaHei"
                                },
                                left: 'center',
                                top: 'center'
                            }
                        ]
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['60%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: true,
                                position: 'outside'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: true
                            },
                            data: [
                                { value: 1048, name: 'Search Engine' },
                                { value: 735, name: 'Direct' },
                                { value: 580, name: 'Email' },
                                { value: 484, name: 'Union Ads' },
                                { value: 300, name: 'Video Ads' }
                            ]
                        }
                    ]
                },
                right3BottomOption: {
                    "tooltip": {
                        "trigger": "axis",
                        "transitionDuration": 0,
                        "borderColor": "#535b69",
                        "borderRadius": 8,
                        "borderWidth": 2,
                        "padding": [
                            5,
                            10
                        ],
                        "axisPointer": {
                            "type": "line",
                            "lineStyle": {
                                "type": "dashed",
                                "color": "#ffff00"
                            }
                        }
                    },
                    "legend": {
                        "icon": "circle",
                        "itemWidth": 8,
                        "itemHeight": 8,
                        "itemGap": 10,
                        "top": "16",
                        "right": "10",
                        "data": [
                            "PV",
                            "UV",
                            "IP"
                        ],
                        "textStyle": {
                            "fontSize": 14,
                            "color": "#a0a8b9"
                        }
                    },
                    "grid": {
                        "top": "46",
                        "left": "13%",
                        "right": "10",
                        "containLabel": false
                    },
                    "xAxis": [
                        {
                            "type": "category",
                            "boundaryGap": false,
                            "axisLabel": {
                                "interval": 0,
                                "fontSize": 14
                            },
                            "axisLine": {
                                "show": false,
                                "lineStyle": {
                                    "color": "#a0a8b9"
                                }
                            },
                            "axisTick": {
                                "show": false
                            },
                            "data": [
                                "1月",
                                "2月",
                                "3月",
                                "4月",
                                "5月",
                                "6月",
                                "7月",
                                "8月",
                                "9月"
                            ],
                            "offset": 10
                        }
                    ],
                    "yAxis": [
                        {
                            "type": "value",
                            "axisLine": {
                                "show": false,
                                "lineStyle": {
                                    "color": "#a0a8b9"
                                }
                            },
                            "axisLabel": {
                                "margin": 10,
                                "textStyle": {
                                    "fontSize": 14
                                }
                            },
                            "splitLine": {
                                "lineStyle": {
                                    "color": "#2b3646"
                                }
                            },
                            "axisTick": {
                                "show": false
                            }
                        }
                    ],
                    "series": [
                        {
                            "name": "PV",
                            "type": "line",
                            "smooth": true,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                }
                            },
                            "areaStyle": {
                                "normal": {
                                    "color": {
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false,
                                        "colorStops": [
                                            {
                                                "offset": 0,
                                                "color": "rgba(137, 189, 27, 0.3)"
                                            },
                                            {
                                                "offset": 0.8,
                                                "color": "rgba(137, 189, 27, 0)"
                                            }
                                        ]
                                    },
                                    "shadowColor": "rgba(0, 0, 0, 0.1)",
                                    "shadowBlur": 10
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "#1cc840"
                                }
                            },
                            "data": [
                                3230,
                                2986,
                                3392,
                                2642,
                                3521,
                                2573,
                                3132,
                                3147,
                                3283,
                                3336,
                                3831,
                                3633
                            ]
                        },
                        {
                            "name": "UV",
                            "type": "line",
                            "smooth": true,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                }
                            },
                            "areaStyle": {
                                "normal": {
                                    "color": {
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false,
                                        "colorStops": [
                                            {
                                                "offset": 0,
                                                "color": "rgba(219, 50, 51, 0.3)"
                                            },
                                            {
                                                "offset": 0.8,
                                                "color": "rgba(219, 50, 51, 0)"
                                            }
                                        ]
                                    },
                                    "shadowColor": "rgba(0, 0, 0, 0.1)",
                                    "shadowBlur": 10
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "#eb5690"
                                }
                            },
                            "data": [
                                1651,
                                1842,
                                2223,
                                2123,
                                2021,
                                1812,
                                1928,
                                2019,
                                2613,
                                2754,
                                2981,
                                3001
                            ]
                        },
                        {
                            "name": "IP",
                            "type": "line",
                            "smooth": true,
                            "showSymbol": false,
                            "lineStyle": {
                                "normal": {
                                    "width": 2
                                }
                            },
                            "areaStyle": {
                                "normal": {
                                    "color": {
                                        "x": 0,
                                        "y": 0,
                                        "x2": 0,
                                        "y2": 1,
                                        "type": "linear",
                                        "global": false,
                                        "colorStops": [
                                            {
                                                "offset": 0,
                                                "color": "rgba(0, 136, 212, 0.3)"
                                            },
                                            {
                                                "offset": 0.8,
                                                "color": "rgba(0, 136, 212, 0)"
                                            }
                                        ]
                                    },
                                    "shadowColor": "rgba(0, 0, 0, 0.1)",
                                    "shadowBlur": 10
                                }
                            },
                            "itemStyle": {
                                "normal": {
                                    "color": "#43bbfb"
                                }
                            },
                            "data": [
                                310,
                                281,
                                123,
                                97,
                                323,
                                373,
                                423,
                                451,
                                501,
                                452,
                                201,
                                177
                            ]
                        }
                    ]
                },
                right3CenterOption: {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: 'Email',
                            type: 'line',
                            stack: 'Total',
                            data: [120, 132, 101, 134, 90, 230, 210],

                            areaStyle: {
                                normal: {
                                    color: {
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        type: 'linear',
                                        global: false,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: 'rgba(0, 136, 212, 0.3)'
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(0, 136, 212, 0)'
                                            }
                                        ]
                                    },
                                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                                    shadowBlur: 10
                                }
                            },
                        }
                    ]
                },
                right3TopOption: {
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration: 0,
                        borderColor: '#535b69',
                        borderRadius: 8,
                        borderWidth: 2,
                        padding: [5, 10],
                        axisPointer: {
                            type: 'line',
                            lineStyle: {
                                type: 'dashed',
                                color: '#ffff00'
                            }
                        }
                    },
                    legend: {
                        icon: 'circle',
                        itemWidth: 8,
                        itemHeight: 8,
                        itemGap: 10,
                        top: '16',
                        right: '10',
                        data: ['PV', 'UV', 'IP'],
                        textStyle: {
                            fontSize: 14,
                            color: '#a0a8b9'
                        }
                    },
                    grid: {
                        top: '46',
                        left: '13%',
                        right: '10',
                        containLabel: false
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                interval: 0,
                                fontSize: 14
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#a0a8b9'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
                            offset: 10
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#a0a8b9'
                                }
                            },
                            axisLabel: {
                                margin: 10,
                                textStyle: {
                                    fontSize: 14
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#2b3646'
                                }
                            },
                            axisTick: {
                                show: false
                            }
                        }
                    ],
                    series: [
                        {
                            name: 'PV',
                            type: 'line',
                            smooth: true,
                            showSymbol: true,
                            symbolSize: 10,
                            lineStyle: {
                                normal: {
                                    width: 2
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#1cc840',
                                    borderWidth: 2
                                }
                            },
                            data: [
                                3230, 2986, 3392, 2642, 3521, 2573, 3132, 3147, 3283, 3336, 3831, 3633
                            ]
                        },
                        {
                            name: 'UV',
                            type: 'line',
                            smooth: true,
                            showSymbol: true,
                            symbolSize: 10,
                            lineStyle: {
                                normal: {
                                    width: 2
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#eb5690',
                                    borderWidth: 2
                                }
                            },
                            data: [
                                2651, 3842, 2223, 3123, 2021, 4812, 1928, 4019, 2613, 2754, 4981, 3001
                            ]
                        }
                    ]
                },
                center3BottomOption: {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        dimensions: ['product', '门诊', '急诊', '住院'],
                        source: [
                            { product: '2010', 门诊: 43.3, 急诊: 85.8, 住院: 93.7 },
                            { product: '2011', 门诊: 83.1, 急诊: 73.4, 住院: 55.1 },
                            { product: '2012', 门诊: 86.4, 急诊: 65.2, 住院: 82.5 },
                            { product: '2013', 门诊: 72.4, 急诊: 53.9, 住院: 39.1 }
                        ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: {},
                    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                },
                left3Top1Option: {
                    data: [
                        {
                            name: '出院人次',
                            value: 167
                        },
                        {
                            name: '就诊人次',
                            value: 123
                        }
                    ],
                    colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                    unit: '人次',
                    showValue: true
                },
                center3CenterOption: {
                    tooltip: {
                        formatter: function(params) {
                            var content = params.name + params.value
                            return content
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x:'right',      //可设定图例在左、右、居中
                        y:'center',     //可设定图例在上、下、居中
                        padding:[0,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                        data: ['直接访问','微信','百度','其他文章','网页']
                    },
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 300,
                        inRange: {
                            color: ['#e0ffff', '#006eed']
                            //  color: ['red', 'pink']
                        },
                        calculable: true
                    },
                    series: {
                        name: '北京',
                        type: 'map3D',
                        map: '北京',
                        data: [
                            { name: '延庆区', value: 31.4, lng: 115.981186, lat: 40.462706 },
                            { name: '怀柔区', value: 38.4, lng: 116.63853, lat: 40.322563 },
                            { name: '密云区', value: 47.9, lng: 116.849551, lat: 40.382999 },
                            { name: '昌平区', value: 196.3, lng: 116.237832, lat: 40.226854 },
                            { name: '顺义区', value: 102, lng: 116.663242, lat: 40.1362 },
                            { name: '平谷区', value: 42.3, lng: 117.128025, lat: 40.147115 },
                            { name: '门头沟区', value: 30.8, lng: 116.108179, lat: 39.94648 },
                            { name: '海淀区', value: 369.4, lng: 116.304872, lat: 39.96553 },
                            { name: '石景山区', value: 65.2, lng: 116.229612, lat: 39.912017 },
                            { name: '西城区', value: 129.8, lng: 116.372397, lat: 39.918561 },
                            { name: '东城区', value: 90.5, lng: 116.42272, lat: 39.934579 },
                            { name: '朝阳区', value: 395.5, lng: 116.449767, lat: 39.927254 },
                            { name: '通州区', value: 137.8, lng: 116.662928, lat: 39.917001 },
                            { name: '大兴区', value: 156.2, lng: 116.348053, lat: 39.732833 },
                            { name: '房山区', value: 104.6, lng: 116.149892, lat: 39.755039 },
                            { name: '丰台区', value: 232.4, lng: 116.293105, lat: 39.865042 }
                        ],
                        
                        regionHeight: 2,
                        boxWidth: 70,
                        //boxHeight:50,
                        boxDepth: 50,
                        top: '-10%',
                        //left:'10%',

                        label: {
                            show: true,
                            formatter: function(params) {
                                var content = params.name
                                return content
                            },
                            textStyle: {
                                color: '#000',
                                fontWeight: 'normal',
                                fontSize: 12,
                                backgroundColor: 'rgba(0,23,11,0)'
                            },

                            emphasis: {
                                //对应的鼠标悬浮效果
                                show: true,
                                textStyle: { color: '#f00' }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 0.4
                            }, //阴影效果
                            emphasis: {
                                color: 'rgb(255,255,255)'
                            }
                        },

                        viewControl: {
                            autoRotate: false,
                            distance: 70
                        }
                    }
                },
                allRightData: {
                    "电动":[
                        {"value":30,"name":"深圳"},
                        {"value":40,"name":"南京"},
                        {"value":20,"name":"兰州"},
                        {"value":10,"name":"北京"},
                        {"value":50,"name":"上海"}
                    ],
                    "汽油":[
                        {"value":10,"name":"深圳"},
                        {"value":20,"name":"南京"},
                        {"value":60,"name":"兰州"},
                        {"value":10,"name":"北京"},
                        {"value":30,"name":"上海"}
                    ]
                }
            }
        },
        created() {
            let that = this;
            this.tabs.forEach(function(ele){
                ele.active = 0;
                if(that.$route.query.tab == ele.id) {
                    ele.active = 1
                }
            });
        },
        components: {
            Echart
        },
        mounted() {
            this.cancelLoading();
        },
        updated() {
            this.$nextTick(function() {
                this.drawPieLeft();
                this.drawPieRight("电动");
            })
        },
        unMounted() {
            clearInterval(this.timing)
        },
        methods: {
            //画图的方法定义在methods里，然后在mounted调用
            drawPieLeft () {
                //初始化echarts实例
                let myPieLeft = this.$echarts.init(document.getElementById('pieCharLeft'))
                myPieLeft.setOption({
                    tooltip: {  //提示
                        trigger: 'item', // 鼠标放到图形上触发
                        formatter: '{b} : {d}%' // 提示框浮层内容格式器,在饼图里面，b代表数据项的名称，d代表这个数据的百分比
                    },
                    calculable: true,
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: [40, 60], // 设置成圆环
                            center: ['50%', '45%'],  //设置饼图的位置
                            color: [   // 饼图的数据颜色会按这个数组循环配对
                                '#288add',
                                '#3fb1e3',
                                '#1fc33a',
                                '#f14f4a',
                                '#8d44ad'
                            ],
                            label: { // 文字平时不显示，鼠标放上去再显示
                                normal: {
                                    show: true,
                                    position: 'inner' // 文字的位置在中心
                                },
                                emphasis: { // 鼠标放上去
                                    show: true,
                                    textStyle: { // 设置字体的样式
                                        fontSize: '20'
                                    }
                                }
                            },
                            labelLine: {  //文字的线不显示
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                { value: '235', name: '电动' },
                                { value: '335', name: '汽油' },
                                { value: '135', name: '天然气' },
                                { value: '25', name: '生物' },
                                { value: '75', name: '其他' }
                            ]
                        }
                    ]
                })
                let _this = this  // 保存指向vue实例的this指针
                myPieLeft.on('click', params => { // 点击每个图形触发的事件，params里面含有该条数据的各个属性
                    _this.drawPieRight(params.name)
                })
            },
            drawPieRight (name) {
                //拿到传过来的name，把他当成key值，就可以拿到具体每一项的数据
                let queryData = this.allRightData[name]
                // let titleText = `${name}设备在各个城市的使用情况`
                let myPieRight = this.$echarts.init(document.getElementById('pieCharRight'))
                myPieRight.setOption({
                    tooltip: {
                        trigger: 'item', // 鼠标放到图形上触发
                        formatter: '{b} : {d}%' // 提示框浮层内容格式器,在饼图里面，b代表数据项的名称，d代表这个数据的百分比
                    },
                    calculable: true,
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            roseType: 'radius', // 把饼图变成南丁格尔图
                            radius: [30, 70], // 设置成圆环
                            center: ['50%', '45%'],
                            color: [
                                '#42cccc',
                                '#0080ff',
                                '#27ae61',
                                '#f6a0bb',
                                '#e6bb0e',
                                '#288add'
                            ], // 颜色将根据饼图的区域个数循环
                            label: {
                                normal: {
                                    position: 'inner', // 文字的位置在中心
                                    show: true
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: queryData
                        }
                    ]
                })
            },
            clickTabs(ind) {
                this.tabs.forEach(function (ele, index) {
                    ele.active = 0;
                    if (ind == index) {
                        ele.active = 1;
                    }
                })
            },
            cancelLoading() {
                setTimeout(() => {
                    this.loading = false
                }, 500)
            }
        }
    }
</script>

<style lang="scss">
    @import '../assets/scss/index2.scss';
</style>
